<template>
    <div class="content-news">
        <h4 class="news-title">新闻列表</h4>
        <div class="news-list-bottom">
            <div class="news-list" v-for="item in newsList" :key="item.messageId">
                <div class="news-img">
                    <img src="../../../../assets/workImg.png" @click="showDetail($event,item.urlimg)"/>
                </div>
                <div class="news-info">
                    <p>
                        <span v-html="item.title"></span>
                        <span>{{item.createTime}}</span>
                    </p>
                    <p v-html="item.message"></p>
                </div>
            </div>
        </div>
        <h4 class="news-footer"></h4>
    </div>
</template>

<script>
import { changeTime } from "@/utils/index";

export default {
    name: "",
    data() {
        return {
            newsList: [
                {
					messageId: "110",
					urlimg:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1752011794,2420967825&fm=26&gp=0.jpg",
                    title: "chrome浏览器频繁登录问题阐述及解决",
                    createTime: "2020-08-10 11:20:30",
                    message:
                        "由于chrome升级，灰度上线了一些新的安全策略，目前会导致OA系统、商业产品后台很多系统出现重复登录及无法访问的情况。",
                },
                {
					messageId: "111",
					urlimg:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1752011794,2420967825&fm=26&gp=0.jpg",
                    title: "chrome浏览器频繁登录问题阐述及解决",
                    createTime: "2020-08-10 11:20:30",
                    message:
                        "由于chrome升级，灰度上线了一些新的安全策略，目前会导致OA系统、商业产品后台很多系统出现重复登录及无法访问的情况。",
                },
                {
					messageId: "112",
					urlimg:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1752011794,2420967825&fm=26&gp=0.jpg",
                    title: "chrome浏览器频繁登录问题阐述及解决",
                    createTime: "2020-08-10 11:20:30",
                    message:
                        "由于chrome升级，灰度上线了一些新的安全策略，目前会导致OA系统、商业产品后台很多系统出现重复登录及无法访问的情况。",
                },
                {
					messageId: "113",
					urlimg:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1752011794,2420967825&fm=26&gp=0.jpg",
                    title: "chrome浏览器频繁登录问题阐述及解决",
                    createTime: "2020-08-10 11:20:30",
                    message:
                        "由于chrome升级，灰度上线了一些新的安全策略，目前会导致OA系统、商业产品后台很多系统出现重复登录及无法访问的情况。",
                },
                {
					messageId: "114",
					urlimg:"https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1752011794,2420967825&fm=26&gp=0.jpg",
                    title: "chrome浏览器频繁登录问题阐述及解决",
                    createTime: "2020-08-10 11:20:30",
                    message:
                        "由于chrome升级，灰度上线了一些新的安全策略，目前会导致OA系统、商业产品后台很多系统出现重复登录及无法访问的情况。",
                },
            ],
        }
    },
    components: {},
    mounted(){
        this.newsList.map((item) => {
            item.createTime = changeTime(item.createTime);
        });
       
    },
    methods: {
        // 查看详情
        showDetail(e, url, messageId) {
            e.stopPropagation();
            // this.$router.push("/" + url);
        },
    }
}
</script>

<style lang="scss" scoped>
    .news-footer {
        height: 30px;
        border-top: 1px solid rgba(240, 242, 245, 1);
    }
    .news-list-bottom {
        width: 100%;
        height: 448px;
        overflow: auto;
        .news-list {
            width: 100%;
            border-bottom: 1px solid rgba(240, 242, 245, 1);
            display: flex;
            padding-right: 22px;
            box-sizing: border-box;
            cursor: pointer;
            .news-img {
                margin: 16px 15px 16px 24px;
                display: block;
                width: 140px;
                height: 80px;
                background: black;
                padding: 30px 21px;
                box-sizing: border-box;
                img {
                    width: 99px;
                    height: 21px;
                }
            }
            .news-info {
                width: 100%;
                margin: 20px 0 0 15px;
                p:nth-child(1) {
                    display: flex;
                    justify-content: space-between;
                    span:nth-child(1) {
                        height: 24px;
                        font-size: 16px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: rgba(53, 64, 82, 1);
                        line-height: 24px;
                    }
                    span:nth-child(2) {
                        height: 22px;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: rgba(127, 143, 164, 1);
                        line-height: 22px;
                    }
                }
                p:nth-child(2) {
                    margin-top: 12px;
                    max-width: 496px;
                    height: 44px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(127, 143, 164, 1);
                    line-height: 22px;
                }
            }
        }
        .news-list:last-child {
            border: none;
        }
        .news-list:hover {
            cursor: pointer;
            background: #EEF8FF;
        }
    }
</style>
